<!DOCTYPE html>  
<!-- 2025.06.09-06.12 周嘉欣 -->
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
    <title>熙康体检系统 - 欢迎开启健康之旅</title>  
    <style>  
        * {  
            margin: 0;  
            padding: 0;  
            box-sizing: border-box;  
            font-family: 'PingFang SC', sans-serif;  
            list-style: none;  
            text-decoration: none;  
        }  

        /* 品牌 logo 矢量图（可直接修改颜色和尺寸） */  
        .xk-logo {  
            width: 200px;  
            height: 200px;  
            margin-bottom: 30px;  
            position: relative;  
            z-index: 10;  
        }  
        .xk-logo svg {  
            width: 100%;  
            height: 100%;  
        }  
        .xk-logo path {  
            fill: #00b37e; /* 品牌健康绿主色 */  
        }  
        .xk-logo .ring {  
            stroke: #00b37e;  
            stroke-width: 4;  
            stroke-dasharray: 200 200;  
            animation: logo-rotate 2s linear infinite;  
        }  

        /* 页面背景与分层动画 */  
        body {  
            background: #f0f9f5;  
            min-height: 100vh;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            justify-content: center;  
            overflow: hidden;  
        }  
        .bg-layer {  
            position: absolute;  
            width: 100%;  
            height: 100%;  
            background: linear-gradient(135deg, #e6f7f2 0%, #f0f9f5 100%);  
        }  
        .data-light {  
            position: absolute;  
            width: 80px;  
            height: 80px;  
            background: radial-gradient(circle, #00b37e1a 0%, transparent 70%);  
            border-radius: 50%;  
            animation: light-pulse 3s infinite;  
        }  

        /* 内容区 */  
        .content-container {  
            text-align: center;  
            padding: 0 20px;  
            position: relative;  
            z-index: 20;  
        }  
        .main-title {  
            font-size: 28px;  
            font-weight: 700;  
            color: #006644;  
            margin-bottom: 10px;  
            letter-spacing: 1px;  
            text-shadow: 0 2px 4px rgba(0, 189, 126, 0.1);  
        }  
        .sub-title {  
            font-size: 16px;  
            color: #666;  
            margin-bottom: 40px;  
            line-height: 1.8;  
        }  

        /* 功能按钮组（带渐变和波纹动效） */  
        .button-group {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            gap: 15px;  
        }  
        .start-btn {  
            padding: 14px 50px;  
            font-size: 18px;  
            color: white;  
            background: linear-gradient(270deg, #00b37e 0%, #008a61 100%);  
            border-radius: 30px;  
            box-shadow: 0 8px 20px rgba(0, 189, 126, 0.25);  
            position: relative;  
            overflow: hidden;  
            transition: transform 0.2s;  
        }  
        .start-btn::before {  
            content: "";  
            position: absolute;  
            width: 100px;  
            height: 100px;  
            background: #ffffff33;  
            border-radius: 50%;  
            top: -50px;  
            left: -50px;  
            transform: translate(-50%, -50%);  
            animation: ripple 1.5s infinite;  
        }  
        .start-btn:hover {  
            transform: translateY(-3px);  
            box-shadow: 0 12px 28px rgba(0, 189, 126, 0.3);  
        }  
        .more-btn {  
            font-size: 14px;  
            color: #00b37e;  
            border: 2px solid #00b37e;  
            padding: 12px 40px;  
            border-radius: 28px;  
            transition: all 0.2s;  
        }  
        .more-btn:hover {  
            background: #00b37e;  
            color: white;  
        }  

        /* 动画定义 */  
        @keyframes logo-rotate {  
            to { transform: rotate(360deg); }  
        }  
        @keyframes light-pulse {  
            0% { box-shadow: 0 0 0 0 rgba(0, 179, 126, 0.2); }  
            70% { box-shadow: 0 0 0 30px rgba(0, 179, 126, 0); }  
            100% { box-shadow: 0 0 0 0 rgba(0, 179, 126, 0); }  
        }  
        @keyframes ripple {  
            to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }  
        }  
    </style>  
</head>  
<body>  
    <!-- 背景分层与动态光效 -->  
    <div class="bg-layer"></div>  
    <div class="data-light" style="left: 20%; top: 30%;"></div>  
    <div class="data-light" style="right: 15%; bottom: 25%;"></div>  

    <!-- 品牌 logo（嵌入式 SVG，可直接修改文字和图形） -->  
    <div class="xk-logo">  
        <svg viewBox="0 0 200 200">  
            <!-- 健康环（旋转动画） -->  
            <circle class="ring" cx="100" cy="100" r="90" fill="none" stroke-dashoffset="0"></circle>  
            <!-- 「熙康」书法字体（简化设计，笔画带圆角） -->  
            <text x="50%" y="65%" dominant-baseline="middle" text-anchor="middle"  
                  font-size="32" font-family="Brush Script MT, cursive" fill="#006644">  
                熙康  
            </text>  
            <!-- 底部健康图标（小叶子，象征自然健康） -->  
            <path d="M100 80 L110 90 L105 100 L95 100 L90 90 Z" fill="#00b37e"></path>  
        </svg>  
    </div>  

    <!-- 内容区 -->  
    <div class="content-container">  
        <h1 class="main-title">熙康体检系统</h1>  
        <p class="sub-title">专业健康检测 • 智能数据管理 • 定制健康方案<br>让每一次体检成为健康生活的新起点</p>  
        <div class="button-group">  
            <a href="login.html" class="start-btn">立即体验</a>  
            <a href="about.html" class="more-btn">了解更多功能</a>  
        </div>  
    </div>  

    <!-- 页面加载动画（淡入+logo环展开） -->  
    <script>  
        // 加载时 logo 环从无到有（模拟数据加载效果）  
        const ring = document.querySelector('.ring');  
        const dasharray = ring.getAttribute('stroke-dasharray');  
        ring.style.strokeDashoffset = dasharray;  
        window.onload = () => {  
            ring.animate({  
                strokeDashoffset: [dasharray, '0']  
            }, { duration: 1000, easing: 'ease-out' });  
            // 页面淡入  
            document.body.style.opacity = 1;  
        };  
    </script>  
</body>  
</html>  
